<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向属性</title>
		<!-- 垂直方向属性 vertical-align
		功能：1.应用于表格【栅格布局】
		     2.行内元素与行内块元素对齐方式
			 理解：文本和图片对齐方式【垂直居中】
			元素种类：
			行内元素：典型行内元素 span、a、文本
			特点：在一行内显示，不可设置宽高
			块级元素：典型块级元素 div、p
			特点：独占一行、可设宽高
			行内块元素：典型行内块元素 img
			特点：在一行内显示、可设宽高
			页面组成：元素之间嵌套生成
			三种元素相互嵌套√  嵌套根据元素页面混乱
			嵌套条件1：在一行内显示【效果】
			          块套行  √  推荐
					  行套行  √
					  行套块  √  增加条件，块增加宽高，造成页面布局混乱  ×
					  块套块  √
			嵌套条件1：独占一行【效果】
					  块套行  √  推荐
					  行套行  ×
					  行套块  ×  混乱
					  块套块  √
			-->
		<style>
			/*抓每个img
			派生（后代）选择器：
			特点：抓取后代中所有（后代）子元素【元素嵌套特点】
			伪类选择器：
			特点：在选择器后，过滤符合特定条件某个元素
			nthchild:选中父元素中第n个
			符合条件：p中包含四个img
			id抓取父元素：空间大
			class抓取父元素中某个子元素：微调*/
			
				/*标准抓取*/
			p img.baseline{
				vertical-align:baseline;
			}
			p img.top{
				vertical-align:top;
			}
			p img.middle{
				vertical-align:middle;
				/*vertical-align与text-align区别
				区别1：属性值不同
				    2.vertical-align操作文本和图片垂直问题
					  text-align操作文本左右和居中以及两边对齐*/
			}
			p img.bottom{
				vertical-align:bottom;
			}
			
			
		</style>
	</head>
	<body>
		<h1>垂直方向属性使用【针对元素种类】</h1>
		<p>花1<img class="baseline" src="img/花1.png" alt="花1" width="100px" height="100px">基线对齐</p>
		<!--顶部对齐、中间对齐、底部对齐
		    图片设置宽高：25px~100px
			-->
		<p>花2<img class="top" src="img/花2.png" alt="花2" width="100px" height="100px">顶部对齐</p>
		<p>花3<img class="middle" src="img/花3.png" alt="花3" width="100px" height="100px">中间对齐</p>
		<p>花4<img class="bottom" src="img/花4.png" alt="花4" width="100px" height="100px">底部对齐</p>
	    <!--需求：垂直方向属性 4个属性值
		    如果，不改变现有html结构，可以找到依次4个img
			抓每个---4个图片
			思路：派生选择器+伪类选择器
			-->
	</body>
</html>